<template>
  <div class="baseDialog">
    <div>
      <el-drawer ref="drawer" :title="$i18n.t('add.selectDynamicProperties')" :visible.sync="drawer" direction="rtl" size="60%"
                 :before-close="handleClose">
        <ele-page v-loading="loading" :formConfig="searchConfig" ref="eleTable" :operateList="operateList"
                  @handleOperateEvent="handleOperateEvent" @row-dblclick="getSelectMesTechnology" :column="column"
                  :getList="getList" uniqueId="mesTechnologyTable">
        </ele-page>
      </el-drawer>
    </div>
  </div>
</template>

<script>
import {
  getAttributeList as getList
} from '@/api/process/mesTechnologyOperate'

export default {
  name: 'attributeDialog',
  data() {
    return {
      title: null,
      drawer: false,
      isLoading: false,
      loading: false,
      searchConfig: {
        inline: true,
        formDesc: {
          characteristicCode: {
            layout: 12,
            type: 'input',
            label: $i18n.t('add.characteristicCode')
          },
          characteristicName: {
            layout: 12,
            type: 'input',
            label: $i18n.t('add.characteristicName')
          }
        }
      },
      operateList: [
        {
          name: $i18n.t('common.cancel'),
          handleName: 'cls' //点击时返回的标识
        },
        {
          name: $i18n.t('mesTechnology.confirmAdd'),
          type: 'success',
          icon: 'el-icon-success',
          handleName: 'add',  // 点击时返回的标识
          isMultiple: true,  // 至少选择一条
          disabled: (data) => {
            return data.length < 1
          }
        }
      ],
      getList,
      // 列表页字段的绑定配置
      column: [
        {
          type: 'selection'
        },
        {
          type: 'index',
          label: $i18n.t('common.order'),
          width: 60
        },
        {
          prop: 'propCode',
          label: $i18n.t('add.propCode')
        },
        {
          prop: 'propName',
          label: $i18n.t("mesTechnology.propName"),
          width: '200',
          showOverflowTooltip: true
        },
        {
          prop: 'characteristicCode',
          label: $i18n.t("mesTechnology.characteristicCode"),
          width: '160',
          showOverflowTooltip: true
        },
        {
          prop: 'characteristicName',
          label: $i18n.t("mesTechnology.characteristicName"),
          width: '160',
          showOverflowTooltip: true,
        },
      ]
    }
  },
  computed: {},
  methods: {
    cancelForm(bool) {
      this.drawer = bool
    },
    handleClose(done) {
      done()
    },
    //表格顶部按钮操作事件
    handleOperateEvent(data) {
      this.title = data.name
      const fnc = {
        search: () => { },
        cls: () => {
          this.cancelForm(false)
        },
        add: () => {
          if (data.rows.length > 0) {
            this.$emit('response', data.rows)
            this.cancelForm(false)
          } else {
            this.$message.warning($i18n.t('common.single'))
          }
        }
      }
      fnc[data.handleName]()
    },
    //刷新表格数据
    refresh(isReset = true) {
      this.$refs.eleTable.refresh(isReset)
    },
    // 弹框表格，双击表格，或者点击确定 返回选中数据
    getSelectMesTechnology(data) {
      var li = [];
      li[0] = data
      this.$emit('response', li)
      this.cancelForm(false)
    }
  }
}
</script>
<style lang="scss" scoped>
.baseDialog {
  /deep/.el-drawer__body {
    padding: 0 10px;
  }
  /deep/ .ele-form-search {
    height: auto!important;
  }
}
</style>
